/* 全局样式 - 背景图片支持 */

/* 确保所有页面都能正确显示背景 */
page {
  background-image: url('/static/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 为需要半透明背景的容器提供样式 */
.bg-transparent {
  background-color: transparent !important;
}

.bg-semi-transparent {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

/* 为卡片提供玻璃态效果 */
.card-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 为深色卡片提供样式 */
.card-dark-glass {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 20px;
  color: #ffffff;
}

/* 为主容器提供适配背景的样式 */
.page-container {
  min-height: 100vh;
  background: transparent;
}

/* 为需要在背景图上清晰显示的文字提供样式 */
.text-with-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-contrast {
  color: #333;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 为滚动区域提供样式 */
.scroll-view-transparent {
  background: transparent;
}

/* 为导航栏提供玻璃态效果 */
.navbar-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 为底部导航栏提供样式 */
.tabbar-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* 为弹窗提供玻璃态效果 */
.modal-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 为按钮提供适配背景的样式 */
.button-glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.button-glass:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button-glass:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 为输入框提供玻璃态效果 */
.input-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 12px;
}

.input-glass:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 154, 255, 0.5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 154, 255, 0.1);
}

@font-face {
  font-family: 'YouSheBiaoTiHei-Regular';
  src: url('../static/fonts/YouSheBiaoTiHei-Regular.ttf');
}

